<template>
  <div ref="graphWrapRef" style="height:300px;position: relative;">
    <h2>我的第十(2)个mxgraph</h2>
    <div id="graphcontainer10-2" ref="graphcontainer10-2" class="graphWrap graph-edit"></div>
  </div>
</template>

<script>
import _ from "lodash";
import mxgraph from '@/utils/mxgraph'
import graphMixin from './graphMixin'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel, mxClient, mxUtils } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel

export default {
mixins: [graphMixin],
  data() {
    return {

    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer10-2')
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      graph.setTooltips(true);

      var parent = graph.getDefaultParent()
      this.initStyle(graph)
      this.initHoverStyle(graph)

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, 'start', 20, 20, 75, 75)
        var bill = graph.insertVertex(parent, null, 'bill', 180, 20, 75, 75)
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75)
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75,)
        graph.insertEdge(parent, null, '', start, bill)
        graph.insertEdge(parent, null, '', bill, check)
        graph.insertEdge(parent, null, '', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },


  },
}
</script>
<style scoped>
.graphWrap {
  position: relative;
  overflow: hidden;
  width: 621px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
  float: left;
}

.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


